<template>
	<div class="LorderView">

		<yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
			<div class="short-item" v-for="item, key in data" :key="key" slot="list">
				<div class="order-title-nav">
					<span class="order-title">{{item.title}}</span>
					<span class="order-state" v-for="sitem,key in statusdata" v-if="sitem.status==item.status">{{sitem.statustext}}</span>
				</div>
				<div class="order-main" @click="LoderInfoGO(item.orderId)">
					<div class="om-imgbox">
						<!--<img class="om-img" v-if="item.house_img.indexOf('?')==-1" :src="item.house_img+'?imageslim'" />-->
						<img class="om-img" :src="item.house_img" />
					</div>
					<div class="om-right">
						<p>出租类型：<span v-if="item.house_type==1">整租</span><span v-if="item.house_type==2">合租</span></p>
						<p>入住时间：{{item.houseStartTime}}</p>
						<p>签约时长：{{item.yearnum}}年</p>
					</div>
				</div>

				<!--待确认-->
				<div class="order-bottom" v-if="item.status==0">
					<div class="ob-box" @click="openConfrim(item.status,item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/orderower_03.png" /></div>取消订单
					</div>
				</div>
				<!--待入住-->
				<div class="order-bottom" v-if="item.status==3">
					<div class="ob-box" @click="userRefundlong(item.orderId,item.contactName,item.address,item.contactPhone)">
						<div class="ob-boxicon"><img src="../assets/img/images/orderower_03.png" /></div>取消订单
						<!--//提前退房-->
					</div>
				</div>
				<!--待支付-->
				<div class="order-bottom" v-if="item.status==2||item.status==1">
					<div class="ob-box" @click="openConfrim(item.status,item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/orderower_03.png" /></div>取消订单
					</div>
					<div class="ob-box" @click="GOLongBill(item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/orderower_03.png" /></div>账单
					</div>
				</div>
				<!--待支付-->
				<div class="order-bottom" v-if="item.status==400">
					<div class="ob-box" @click="openConfrim(item.status,item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/orderower_03.png" /></div>删除
					</div>
					<div class="ob-box" @click="setOpenApp('https://apis.zhudd.com/openApp.html')" >
						<div class="ob-boxicon"><img src="../assets/img/images/orderower_03.png" /></div>再次签约
					</div>
				</div>
				<!--已完成-->
				<div class="order-bottom" v-if="item.status==401||item.status==404">
					<div class="ob-box" @click="openConfrim(item.status,item.orderId)">
						<div class="ob-boxicon"><img src="../assets/img/images/order_close.png" /></div>删除
					</div>
				</div>

			</div>
			<!-- 数据全部加载完毕显示 -->
			<span slot="doneTip">暂无更多订单信息</span>
			<!-- 加载中提示，不指定，将显示默认加载中图标 -->
			<img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg" />

		</yd-infinitescroll>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import eventBus from "../assets/libs/eventBus.js";
	export default {
		name: 'LorderView',
		data() {
			return {
				page: 1,
				order_type: '',
				orderower: '你是否要取消订单申请，取消后如果所选日期被出租，将无法再次预定，确认是否取消',
				orderclose: "订单删除后将无法恢复，确认是否删除？",
				mySessionUserinfo: JSON.parse(sessionStorage.getItem("userinfo")),
				statusdata: [{
						status: 0,
						statustext: "待确认"
					}, {
						status: 1,
						statustext: "待支付"
					}, {
						status: 2,
						statustext: "待支付"
					}, {
						status: 3,
						statustext: "待入住"
					}, {
						status: 4,
						statustext: "入住中"
					}, {
						status: 5,
						statustext: "待评价"
					}, {
						status: 6,
						statustext: "已完成"
					}, {
						status: 400,
						statustext: "已失效"
					}, {
						status: 401,
						statustext: "已取消"
					}, {
						status: 404,
						statustext: "已拒绝"
					}, {
						status: 600,
						statustext: "已退房"
					}, {
						status: 800,
						statustext: "已冻结"
					},

				]
			}
		},
		props: ["data"],
		mounted() {},
		computed: {
			...mapGetters([
				'source',
			])
		},
		methods: {
			...mapActions({
				setOpenApp:"setOpenApp"
			}),
			userRefundlong(orderId, contactName, address, contactPhone) {
				this.$router.push({
					path: "/UserRefundLong",
					query: {
						orderId: orderId,
						contactName: contactName,
						address: address,
						contactPhone: contactPhone
					}
				})
			},
			//				打开支付账单
			GOLongBill(orderId) {
				this.$router.push({
					path: "/LongBill",
					query: {
						orderId: orderId
					}
				})
			},
			openConfrim(sta, orderId) {
				let ajaxSign = {
					source: this.source, //string	是			
					token: this.mySessionUserinfo.token, //string	是			
					userId: this.mySessionUserinfo.id.toString(), //string	是			
					orderId: orderId.toString(), //string	是			
					type: '0', //string	是	1取消预约2取消支付3删除(见详细说明)
				}
				//				this.$store.dispatch('setOpenApp')
				var that = this;
				if(sta <= 6) {
					ajaxSign.type = '1';
					this.ordermsg = this.orderower;
				}
				if(sta ==1) {
					ajaxSign.type = '2';
					this.ordermsg = "取消订单后，如所选日期被出租，您将无法再次申请预订，确定是否取消？";
				}
				if(sta >= 5) {
					ajaxSign.type = '3';
					this.ordermsg = "订单删除后将无法恢复，确认是否删除？";
				}
				this.$dialog.confirm({
					title: '提示',
					mes: this.ordermsg,
					opts: () => {
						let ajaxData = api.getAES(ajaxSign);
						console.log(ajaxData)
						api.GetOrderUser(ajaxData)
							.then(res => {
								this.$dialog.toast({
									mes: res.msg,
									timeout: 1000
								})
								if(res.sta == 200) {
									this.$parent.orderListLongdata = [];
									this.$emit('orderListLong', this.order_type, this.page);
								}
							})
					}
				});
			},
			LoderInfoGO(orderId) {
				var that = this;
				that.$router.push({
					path: "LoderInfo",
					query: {
						orderId: orderId
					}
				})
			},
			loadList() {
				var that = this;
				eventBus.$on('order_typelong', (e) => {
					that.order_type = e
				})
				/* 单次请求数据完毕 */
				that.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
				that.page++;
				that.$emit('orderListLong', that.order_type, that.page);
			}
		}
	}
</script>

<style>
	@import url("../assets/css/TorderView.css");
	.shortorder .yd-list-loading>div {
		display: block !important;
	}
</style>